<template>
    <div id="AddressEdit">
        <van-call
            :mode="mode"
            :avatar-figure="1"
            title="吴化平"
            tip="语音通话中"
            :hand-free="handFree"
            :count="count"
            @switchMode="switchMode"
            @switchHandFree="switchHandFree"
            @switchCamera="switchCamera"
            @hangUp="hangUp"
        >
            <template slot="video">
                <!-- 视频模式插槽内容，以下用图片模拟视频流 -->
                <div
                    :class="['remote-wrapper', reverse ? 'local' : 'remote']"
                />
                <div :class="['local-wrapper', reverse ? 'remote' : 'local']" />
            </template>
        </van-call>
    </div>
</template>

<script>
export default {
    data() {
        return {
            mode: "voice",
            handFree: false,
            count: "14.15",
            reverse: false,
        };
    },
    methods: {
        switchMode() {
            this.mode = this.mode === "voice" ? "video" : "voice";
            this.reset();
        },
        switchHandFree() {
            this.handFree = !this.handFree;
        },
        switchCamera() {
            this.reverse = !this.reverse;
        },
        hangUp() {
            this.$toast("hangUp");
        },
        reset() {
            this.reverse = false;
            this.handFree = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.remote-wrapper {
    width: 100%;
    height: 100%;
}
.remote {
    // background: url("../../../assets/images/other/remote.png");
    background-size: 100% 100%;
}
.local-wrapper {
    position: fixed;
    top: 60px;
    right: 4px;
    z-index: 1;
    width: 92px;
    height: 164px;
    border-radius: 4px;
    overflow: hidden;
}
.local {
    // background: url("../../../assets/images/other/local.png");
    background-size: 100% 100%;
}
</style>